<template>
	<view class="iSelector">
		<view class="pd40" @click="show=!show">
			<view class="iSelected" :class="border?'border':''">
				<view class="tl">
					{{title?title:(currentText||placeholder)}}
				</view>
				<view class="tr">
					<view class="cur">
						{{title?(currentText||placeholder):''}}
					</view>
					<view class="ico" :style="'transform: rotate('+(show?'90deg':'0deg')+');'">
						<image src="@/static/images/icon-more.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="selectDrop" :class="show?'active':''">
			<scroll-view scroll-y="true" class="scrollDrop">
				<view class="option" v-for="(op,index) in list" :key="index" @click="selectOption(op,index)" :class="currentValue==op.value?'selected':''">
					<view class="n1">
						{{op.label}}
					</view>
					<view class="n2" v-if="op.label2">
						{{op.label2}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"TabBar",
		props:{
			list:{
				type:Array,
				default:[]
			},
			title:{
				type:String,
				default:''
			},
			placeholder:{
				type:String,
				default:'请选择'
			},
			border:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				show:false,
				currentValue:'',
				currentText:'',
				currentIndex:''
			};
		},
		methods:{
			selectOption(option,index){
				var that=this;
				that.currentIndex=index;
				that.currentText=option.label;
				that.currentValue=option.value;
				that.$emit('change',option);
				that.show=false;
			}
		},
		watch:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.iSelector{
		position: relative;
		.pd40{
			padding: 0 40rpx;
		}
		.iSelected{
			flex: 0 0 auto;
			display: flex;
			align-items: center;
			height: 100rpx;
			justify-content: space-between;
			font-size: 28rpx;
			&.border{
				border-bottom: 1rpx solid #f7f5f2;
			}
			.tl{
				flex: 1 1 auto;
				overflow: hidden;
				padding-right: 30rpx;
				color: #897f7a;
			}
			.tr{
				flex: 0 0 auto;
				display: flex;
				align-items: center;
				color: #65554d;
				.ico{
					flex: 0 0 auto;
					margin-left: 10rpx;
					image{
						display: block;
						width: 11rpx;
						height: 19rpx;
					}
				}
				.cur{
					flex: 0 0 auto;
				}
			}
		}
		.selectDrop{
			position: absolute;
			left: 0;
			top: 100%;
			width: 100%;
			padding: 0 30rpx;
			background: #fff;
			border-radius: 0 0 20rpx 20rpx;
			box-sizing: border-box;
			max-height: 0;
			overflow: hidden;
			z-index: 1050;
			&.active{
				max-height: 300rpx;
				transition: .16s;
				padding-bottom: 20rpx;
				box-shadow: 0 10rpx 10rpx rgba(0,0,0,0.05);
			}
			.scrollDrop{
				max-height: 300rpx;
			}
			.option{
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				height: 68rpx;
				border-radius: 4rpx;
				font-size: 28rpx;
				color: #897f7a;
				&.selected{
					background: #fff3e5;
					color: #fe9c29;
				}
				.n1{
					flex: 0 0 auto;
					width: 4em;
				}
				.n2{
					flex: 1 1 auto;
					padding-left: 10rpx;
				}
			}
		}
	}
	
</style>